<!--角色管理-->
<template>
  <div id="role" class="app-container">
    <div class="flex-row" style="flex:1;overflow:hidden">
      <div class="conmmon-container-left scroll__y__content scrollbar-no-width" style="width:280px">
        <role-tree ref="roleTree" :data-scope-options="dataScopeOptions" @selectedRole="handleSelectedRole" />
      </div>
      <div class="conmmon-container-main flex-main">
        <div class="filter-container">
          <el-form
            ref="dataForm"
            :inline="true"
            :model="currentSelectedRole"
            label-position="right"
            label-width="90px">
            <template>
              <el-form-item label="角色编号:"> {{ currentSelectedRole.code }} </el-form-item>
              <el-form-item label="角色名称:">{{ currentSelectedRole.name }}</el-form-item>
              <el-form-item label="数据范围:"><span class="color-primary">{{ dataScope }}</span></el-form-item>
              <el-form-item label="角色描述:"> {{ currentSelectedRole.description?currentSelectedRole.description:'-' }} </el-form-item>
            </template>
            <el-empty v-if="!currentSelectedRole.id" description="暂无角色">
              赶快去<span class="color-primary common-cursor" style="margin:auto 5px" @click="handleCreate">新增</span>吧！
            </el-empty>
          </el-form>
        </div>
        <el-tabs v-model="selectedTabs" class="common-tabs">
          <el-tab-pane label="权限分配" name="rolePermission" />
          <el-tab-pane label="人员分配" name="roleUser" />
        </el-tabs>
        <div class="table-container flex-main">
          <template v-if="selectedTabs==='rolePermission'">
            <role-permission :selected-role="currentSelectedRole" />
          </template>
          <template v-if="selectedTabs==='roleUser'">
            <role-user :selected-role="currentSelectedRole" />
          </template>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import rolePermission from './rolePermission'
import roleUser from './roleUser'
import RoleTree from './RoleTree'
export default {
  components: { RoleTree, rolePermission, roleUser },
  data() {
    return {
      currentSelectedRole: {},
      selectedTabs: 'rolePermission',
      // 数据范围选项
      dataScopeOptions: [
        {
          value: 1,
          label: '全部数据权限'
        },
        {
          value: 2,
          label: '自定数据权限'
        }, {
          value: 3,
          label: '本机构数据权限'
        }, {
          value: 4,
          label: '本机构及以下数据权限'
        },
        {
          value: 5,
          label: '本部门数据权限'
        },
        {
          value: 6,
          label: '本部门及以下数据权限'
        },
        {
          value: 7,
          label: '仅本人数据权限'
        }
      ]
    }
  },
  computed: {
    dataScope: function() {
      var temp = this.dataScopeOptions.filter((item) => { return item.value === this.currentSelectedRole.dataScope })
      if (temp.length === 0) {
        return '-'
      } else {
        return temp[0].label
      }
    }
  },
  watch: {
    selectedTabs: function(val) {

    }
  },
  created() {
  },
  methods: {
    handleSelectedRole(val) {
      this.currentSelectedRole = val
    },
    handleCreate() {
      this.$refs.roleTree.handleCreate()
    }

  }
}
</script>
<style lang="scss">

</style>
